<template>
	<div class="app-container">
		<!-- 搜索 -->
    <div class="filter-container tw-filter">
      <el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-edit" v-has="$store.state.user.btn_common+'add'" @click="handleAdd()">添加</el-button>
      <el-button class="filter-item tw-filter-button" size="medium" icon="el-icon-delete" v-has="$store.state.user.btn_common+'del'" @click="handleDelete()">批量删除</el-button>

      <el-input v-model="queryList.name" placeholder="请输入名称" class="filter-item tw-filter-input" clearable/>
      <!-- <el-input v-model="queryList.company_id" placeholder="请输入企业ID" class="filter-item tw-filter-input" clearable/> -->
      <el-select v-model="queryList.state" class="filter-item tw-filter-input" placeholder="请选择状态">
      	<el-option key="" label="全部状态" value="" />
      	<el-option key="1" label="启用" value="1" />
      	<el-option key="0" label="禁用" value="0" />
      </el-select>

      <el-button v-waves class="filter-item tw-filter-button" size="medium" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

		<!-- 表格内容 -->
    <el-table
      v-loading="listLoading"
      :data="tableList"
      @selection-change="handleSelectionChange"
      border fit highlight-current-row style="width: 100%;"
    >
			<el-table-column type="selection" width="50" />
			<el-table-column label="排序" prop="sort_id" align="center" width="80" v-has="$store.state.user.btn_common+'edit'">
				<template slot-scope="{row}">
					<el-input v-model="row.sort_id" class="edit-input" size="small" @change="updateSort(row.id, row.sort_id)" />
				</template>
			</el-table-column>
			<el-table-column label="名称" prop="name" align="left" />
			<el-table-column label="链接" prop="url" align="left" />
			<el-table-column label="图标" prop="image_src" align="center">
				<template slot-scope="{row}">
					<el-image style="width: 100px; height: 100px" fit="cover" v-if="row.image_src" :src="row.image_src_str" :preview-src-list="[row.image_src_str]"></el-image>
				</template>
			</el-table-column>
      <!-- <el-table-column label="所属企业" align="left">
      	<template slot-scope="{row}">
      		<span v-if="row.company_id">{{row.company_name}}【{{row.company_id}}】</span>
      	</template>
      </el-table-column> -->
			<el-table-column label="状态" align="center">
				<template slot-scope="{row}">
					<span v-if="row.state == 1">启用</span>
					<span v-else>禁用</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="220" align="center" class-name="small-padding fixed-width">
				<template slot-scope="{row}">
					<el-button size="mini" v-has="$store.state.user.btn_common+'edit'" @click="handleEdit(row.id)">编辑</el-button>
					<el-button size="mini" v-has="$store.state.user.btn_common+'upshow'" v-if="row.state" @click="handleUpshow(row.id)">禁用</el-button>
					<el-button size="mini" v-has="$store.state.user.btn_common+'show'" v-else @click="handleShow(row.id)">启用</el-button>
					<el-button size="mini" v-has="$store.state.user.btn_common+'del'" @click="handleDelete(row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="isPage && listTotal > 0" :total="listTotal" :page.sync="queryList.curpage" :limit.sync="queryList.page" @pagination="getList" />

		<!-- 添加/编辑 -->
    <el-dialog width="45%" @close="resetForm()" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form label-position="right" label-width="120px" ref="dataForm" :rules="rules" :model="form">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入名称"/>
				</el-form-item>
        <el-form-item label="链接" prop="url">
        	<el-input v-model="form.url" placeholder="请输入链接"/>
        </el-form-item>
        <el-form-item label="图标">
          <UploadOne v-on:uploadCallBack="uploadCallBack($event, 'image_src')" :showUrl="form.image_src_str" :formData="{dir_type: apiPath}" tip="图标尺寸要求宽度为100像素，高度为100像素，支持格式gif,jpg,png"></UploadOne>
        </el-form-item>
				<el-form-item label="状态" prop="state">
					<el-radio-group v-model="form.state">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="排序" prop="sort_id">
					<el-input v-model="form.sort_id" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogStatus==='create'?createData():updateData()">保存</el-button>
				<el-button @click="dialogFormVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // 基于el分页的二次封装
	import waves from '@/directive/waves' // waves directive
	import Tinymce from '@/components/Tinymce' // 富文本编辑器
  import UploadOne from '@/components/Upload/UploadOne'

	export default {
		components: { Pagination, Tinymce, UploadOne },
		directives: { waves },
		data() {
			return {
				// 数据列表
				listLoading: true,
				listTotal: 0,
				isPage: false,
				tableList: [],
				multipleSelection: [],//多选数据
				// 添加/编辑弹窗
				dialogFormVisible: false,
				dialogStatus: '',
				textMap: {
					update: '编辑',
					create: '添加'
				},
        //键字段
        keyName: 'id',
        apiPath: 'project.link',

				// 搜索数据
				queryList: {
					page: this.$store.state.settings.page, // 每页显示数量
					curpage: 1, // 当前页码
					name: '', //  名称
          //company_id: '',
					state: null
				},

				// 表单数据
				form: {
          id: '',
					name: '', //名称
					url: '', //链接
					image: '', //图标url
          image_str: '',
          image_src_str: '',
					state: 1, //状态，0禁用，1启用
					sort_id: 255 //排序
				},
				// 重置数据
				formReset: {
          id: '',
          name: '', //名称
          url: '', //链接
          image: '', //图标url
          image_str: '',
          image_src_str: '',
          state: 1, //状态，0禁用，1启用
          sort_id: 255 //排序
				},
				// 验证
				rules: {
					name: [{ required: true, message: '请输入名称！', trigger: 'change' }],
					url: [{ required: true, message: '请输入链接！', trigger: 'change' }],
				}
			}
		},
		created() {
			//获取数据列表
			this.getList()
		},
		methods: {
      //文件上传回调
      uploadCallBack(res, fieldName=''){
        if(fieldName){
          this.form[fieldName] = res.fileName;
          this.form[fieldName+'_str'] = res.showUrl;
        }else{
          this.$message('图片字段错误！');
        }
      },
 /*******************************公共方法******************************/
       // 搜索
       handleFilter() {
       	this.queryList.curpage = 1
       	this.tableList = []
         this.listTotal = 0
       	this.getList()
       },
       // 列表选择
       handleSelectionChange(val) {
       	this.multipleSelection = val
       },
       // 重置form
       resetForm() {
       	this.form = JSON.parse(JSON.stringify(this.formReset))
       },
 			// 获取数据列表
 			getList() {
 				this.listLoading = true
 				this.$api.fetchList(this.queryList, this.apiPath).then(response => {
 					this.tableList = response.list
 					this.listTotal = response.list_count
 					this.isPage = response.is_page
          this.listLoading = false
 				})
 			},
 			// 添加
 			handleAdd() {
 			  this.resetForm()
 			  this.dialogStatus = 'create'
 			  this.dialogFormVisible = true
 			  this.$nextTick(() => {
 			    this.$refs['dataForm'].clearValidate()
 			  })
 			},
 			// 编辑
 			handleEdit(id = 0) {
 			  this.resetForm()
 			  // 获取详情
 			  this.$api.getDetail({ id: id }, this.apiPath).then(response => {
           //数据处理
           for(let key in this.form){
             if(response.detail.hasOwnProperty(key)){
               this.form[key] = response.detail[key]
             }
           }
 			  })
 			  this.dialogStatus = 'update'
 			  this.dialogFormVisible = true
 			  this.$nextTick(() => {
 			    this.$refs['dataForm'].clearValidate();
 			  })
 			},
       // 添加-数据提交
       createData() {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
             this.$api.add(this.form, this.apiPath).then(() => {
               // 重新获取列表
               this.queryList.curpage = 1
               this.tableList = []
               this.getList()

               this.dialogFormVisible = false
               this.$message({
                 message: '添加成功',
                 type: 'success'
               })
             })
           }
         })
       },
       // 编辑-数据提交
       updateData() {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
             this.$api.edit(this.form, this.apiPath).then(response => {
               // 重新获取列表
               this.getList()

               this.dialogFormVisible = false
               this.$message({
                 message: '编辑成功',
                 type: 'success'
               })
             })
           }
         })
       },
       // 删除
       handleDelete(id = 0) {
         let current = this
         let id_str = ''
         if (!id) {
           // 多选
           if (!this.multipleSelection.length) {
             this.$message({
               message: '请选择删除的条目！',
               type: 'warning'
             })
             return false
           }
           // 数据处理
           this.multipleSelection.forEach(item => {
             id_str += item[current.keyName] + ','
           })
         } else {
           id_str = id
         }

         // 提交数据
         this.$confirm('确认删除数据吗?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           this.$api.del({ id_str: id_str }, this.apiPath).then(response => {
             // 重新获取列表
             this.getList()
             this.$message({
               message: '删除成功',
               type: 'success'
             })
           })
         })
       },
 			// 排序
 			updateSort(id = 0, sort = '') {
 				this.$api.editSort({
 					id: id,
 					sort: sort
 				}, this.apiPath).then(response => {
 					this.$message({
 						message: '排序成功',
 						type: 'success'
 					})
 				})
 			},
 			//启用
 			handleShow(id = 0) {
 				this.$confirm('确认启用数据吗?', '提示', {
 					confirmButtonText: '确定',
 					cancelButtonText: '取消',
 					type: 'warning'
 				}).then(() => {
 					this.$api.show({ id_str: id }, this.apiPath).then(response => {
 						// 重新获取列表
 						this.getList()
 						this.$message({
 							message: '启用成功',
 							type: 'success'
 						})
 					})
 				})
 			},
 			//禁用
 			handleUpshow(id = 0) {
 				this.$confirm('确认禁用数据吗?', '提示', {
 					confirmButtonText: '确定',
 					cancelButtonText: '取消',
 					type: 'warning'
 				}).then(() => {
 					this.$api.upshow({ id_str: id }, this.apiPath).then(response => {
 						// 重新获取列表
 						this.getList()
 						this.$message({
 							message: '禁用成功',
 							type: 'success'
 						})
 					})
 				})
 			}
 /*******************************公共方法END******************************/

		}
	}
</script>
